import { Tools } from './../../../../../tools/tools';
import { ZePrideComponent } from './../../../../../../models/zepride-component';
import { AfterViewInit, Component, Input, OnInit, ViewChild, ViewContainerRef, ChangeDetectorRef, ComponentRef } from '@angular/core';
import { RenderComponentConfig } from 'src/app/common/engines/models';
import { ComponentMapTool } from 'src/app/common/engines/tools/component-map-tool';
import { TmpComItem } from 'src/app/models';
import { PageService } from 'src/app/services';
import { EngineService } from '../../../../../engines/services/engine.service';
import { BaseFieldComponent } from '../../base-field/base-field.component';

@Component({
  selector: 'zepride-cell-tmp',
  templateUrl: './cell-tmp.component.html',
  styleUrls: ['./cell-tmp.component.less']
})
export class CellTmpComponent implements OnInit, AfterViewInit {
  @ViewChild('componentRef', { read: ViewContainerRef }) containerRef: ViewContainerRef;
  private _tmpComItemId: string;
  @Input() set tmpComItemId(value: string) {
    this._tmpComItemId = value;
  }
  tmpComItems: TmpComItem[] = [];

  @Input() componentData: ZePrideComponent;
  @Input() parentBindField: string;
  @Input() showLabelTxt = false;
  componentRef: ComponentRef<BaseFieldComponent>;
  private _disabled = false;
  private _invalid = false;
  private _tplInvalid = false;

  get disabled() {
    return this._disabled;
  }

  @Input() set disabled(value: boolean) {
    if (this.componentRef) {
      this.componentRef.instance.componentData.disabled = value;
    }
    this._disabled = value;
  }

  get invalid() {
    return this._invalid;
  }

  @Input() set invalid(value: boolean) {
    if (this.componentRef) {
      this.componentRef.instance.componentData.invalid = value;
    }
    this._invalid = value;
  }

  @Input() set tplInvalid(value: boolean) {
    if (this.componentRef) {
      this.componentRef.instance.componentData.tplInvalid = value;
    }
    this._tplInvalid = value;
  }

  get tplInvalid() {
    return this._tplInvalid;
  }

  constructor(
    private engineService: EngineService,
    private pageSvr: PageService,
    private changeRef: ChangeDetectorRef
  ) {
    this.tmpComItems = this.pageSvr.getTmpComItems();
  }

  ngOnInit() { }

  ngAfterViewInit() {
    const component = this.tmpComItems.find(x => x.id == this._tmpComItemId);
    if (component) {
      this.componentRef = this.renderComponents(component);
    }
  }

  renderComponents(component: TmpComItem) {
    const config = this.generateRenderConfig(component, this.containerRef);
    if (config) {
      const ref = this.engineService.renderComponent(config) as any;
      this.componentData.extends.noLabelTxt = !this.showLabelTxt;
      ref.instance.componentData = { ...ref.instance.componentData, ...this.componentData };
      this.changeRef.detectChanges();
      return ref;
    } else {
      return null;
    }
  }

  generateRenderConfig(tempComponent: TmpComItem, viewContainerRef: ViewContainerRef) {
    const uuid = Tools.GetGuid();
    let componentData: any = { ...this.componentData };
    if ((this.componentData as any).disabled == undefined || (this.componentData as any).disabled == null) {
      componentData.disabled = this.disabled;
    }
    if ((this.componentData as any).invalid == undefined || (this.componentData as any).invalid == null) {
      componentData.invalid = this.invalid;
    }
    if ((this.componentData as any).tplInvalid == undefined || (this.componentData as any).tplInvalid == null) {
      componentData.tplInvalid = this.tplInvalid;
    }
    tempComponent.component.identifyId = uuid;
    tempComponent.component.tmpComItemId = tempComponent.id;
    componentData = { ...tempComponent.component, ...componentData };
    const renderItem = ComponentMapTool.current.getRenderItem(tempComponent.component.selector, componentData, this.engineService.currentDataModel);
    if (renderItem) {
      const config: RenderComponentConfig = {
        renderItem,
        viewContainerRef
      };
      return config;
    } else {
      return null;
    }
  }

}
